<template>
  <div class="tool-echart-ring">
    <eharts-option :config="config" :option="option" :key="key"></eharts-option>
  </div>
</template>
<script>
import mixins from "../mixin";
export default {
  name: "tool-echart-line",
  mixins: [mixins],
  computed: {
    option() {
      const gridData = this.tableData;
      const vData = [];
      gridData.valueData.forEach((item, index) => {
        vData.push({
          name: gridData.xData[index],
          value: item.value,
        });
      });
      const series = [
        {
          name: "Access From",
          type: "pie",
          radius: [this.attr.radius + "%", this.attr.activeRadius + "%"],
          label: {
            show: false,
            position: "center",
          },
          labelLine: {
            show: false,
          },
          data: vData,
        },
      ];
      return {
        color: this.attr.colorGroup,
        grid: {
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {
          show: false,
          trigger: "item",
        },
        legend: {
          show: this.attr.legendShow,
          orient: this.attr.legendType ? "vertical" : "horizontal", // 图例竖列 vertical
          right: this.attr.legendRight,
          top: this.attr.legendTop,
          textStyle: {
            fontSize: 12,
            color: this.attr.legendColor,
          },
        },
        series: series,
      };
    },
  },
  data() {
    return {
      key: Date.parse(new Date()),
      tableData: {
        xData: [],
        yData: [],
        valueData: [],
      },
      attr: {
        company: "%",
        colorGroup: [
          "#37a2da",
          "#32c5e9",
          "#37a2da",
          "#37a2da",
          "#32c5e9",
          "#ffdb5c",
        ],
        dataNumber: 0.5,
        radius: 40, // 内圈半径
        activeRadius: 50, // 外圈半径
        fontSize: 16, // 字体大小
        companyFontSize: 12, // 单位字体大小
        fontColor: "#ffffff",
        legendShow: true, //图例显示
        legendColor: "#000", //图例字体颜色
        legendTop: 10, //图例位置
        legendRight: 10, //图例位置
        legendType: false, //图例顺序
      },
    };
  },
  pageData: {
    name: "tool-echart-ring",
    title: "圆环图",
    count: 0,
    width: 540,
    height: 360,
    config: {
      label: "圆环图",
      data: {
        key: "tableData",
        type: "defaulteVal",
        value: {
          valueData: [
            { name: "目标值", value: 93 },
            { name: "实际值", value: 32 },
          ],
          yData: ["数据"],
          xData: ["目标值", "实际值"],
        },
      },
      attr: [
        {
          key: "span",
          title: "栅格布局",
          formType: "layout-span",
          group: "basics",
          type: "Object",
          data: {
            status: true,
            row: 2,
            column: 1,
          },
        },
        {
          key: "colorGroup",
          title: "颜色主题",
          formType: "color-group",
          group: "basics",
          type: "Boolean",
          data: [
            "#01def6",
            "#cccccc",
            "#FF3333",
            "#37a2da",
            "#32c5e9",
            "#ffdb5c",
          ],
        },
        {
          key: "dataNumber",
          title: "显示文字",
          formType: "text-string",
          group: "basics",
          type: "String",
          data: '0.5',
        },
        {
          key: "company",
          title: "单位",
          formType: "text-string",
          group: "basics",
          type: "Boolean",
          data: '%',
        },
        
        {
          key: "fontSize",
          title: "字体大小",
          formType: "text-number",
          group: "basics",
          type: "Boolean",
          data: 32,
        },
        {
          key: "fontColor",
          title: "字体颜色",
          formType: "color-picker",
          group: "basics",
          type: "String",
          data: "#000",
        },
        {
          key: "legendShow",
          title: "图例显示",
          formType: "radio",
          group: "basics",
          type: "Boolean",
          data: true,
        },
        {
          key: "legendType",
          title: "竖列显示",
          formType: "radio",
          group: "basics",
          type: "Boolean",
          data: true,
        },
        {
          key: "legendColor",
          title: "图例颜色",
          formType: "color-picker",
          group: "basics",
          type: "String",
          data: "#000",
        },
        {
          key: "legendTop",
          title: "距上",
          formType: "text-number",
          group: "basics",
          type: "Number",
          data: 20,
        },
        {
          key: "legendRight",
          title: "距右",
          formType: "text-number",
          group: "basics",
          type: "Number",
          data: 20,
        },
        {
          key: "radius",
          title: "内圈半径",
          formType: "text-number",
          group: "basics",
          type: "Number",
          data: 50,
        },
        {
          key: "activeRadius",
          title: "外圈半径",
          formType: "text-number",
          group: "basics",
          type: "Number",
          data: 60,
        },
        {
          key: "companyFontSize",
          title: "单位字体大小",
          formType: "text-number",
          group: "basics",
          type: "Number",
          data: 20,
        },
      ],
    },
  },
};
</script>

<style scoped lang="scss">
.tool-echart-ring {
  width: 100%;
  height: 100%;
  // border: 1px solid #ddd;
  // background-color: #fff;
}
</style>
